{extend name="public/base"}
{block name="body"}
{include file="public/colnav"}
<div class="container">
	<ol class="breadcrumb">
	  <li><a href="#">电子产品</a></li>
	  {$place}
	  <li>{$goodsInfo.name}</li>
	</ol>
	<!-- 商品图片展示及商品选择 -->
	<div class="row">
		<!-- 展示图 -->
		<div class="col-md-4">
			<div class="goodsinfo-img-view">
				<div class="goodsinfo-img-wrap">
					<img width="100%" src="{$goodsInfo.thumb}" alt="">
				</div>
				<div class="goodsinfo-img-box">
					<span class="glyphicon glyphicon-menu-left"></span>
					<span class="glyphicon glyphicon-menu-right"></span>
					<div class="goodsinfo-img-list">
						<ul style="position: absolute; width: 456px; height: 58px; top: 0px; left: 0px;">
							{foreach $goodsImgList as $imgList}
							<li>
								<img src="{$imgList.pic_cover}" width="50" height="50" alt="{$goodsInfo.name}">
							</li>
							{/foreach}							
						</ul>
					</div>					
				</div>
			</div>
		</div>
		<!-- 商品信息 -->
		<div class="col-md-6">
			<!-- 商品基本信息 -->
			<div class="goods-info-wrap">
				<h4 class="sku-name">{$goodsInfo.name}</h4>
				<div class="goods-news">
					<small>{$goodsInfo.describe}</small>
				</div>
				<div class="goods-info-price">
					<div class="dt">商城价格</div>
					<div class="dd"><em>¥</em><i>{$goodsInfo.price}</i></div>
				</div>
				<div class="goods-info-sale">
					<div class="dt">促　　销</div>
					<div class="dd">赠送充电宝,电风扇之类的</div>
				</div>
				<div class="goods-info-flow">
					<div class="dt">配 送 至</div>
					<div class="dd">山东省聊城市东昌府区</div>
				</div>
				<div class="goods-info-weight">
					<div class="dt">重　　量</div>
					<div class="dd">0.4KG</div>
				</div>
				<div class="innerline"></div>
				<!-- 商品规格选择 -->
				<div id="attr-spec-1" data-type="网络" class="goods-info-spec">
					<div class="dt">网　　络</div>
					<div class="dd">
						<div class="item selected" data-value="极光蓝">
							<a href="javascript:"><i>4G联通版</i></a>
						</div>
						<div class="item" data-value="极光蓝">
							<a href="javascript:"><i>4G电信版</i></a>
						</div>
						<div class="item" data-value="极光蓝">
							<a href="javascript:"><i>4G移动版</i></a>
						</div>					
					</div>					
				</div>
				<div id="attr-spec-2" class="goods-info-spec">
					<div class="dt">颜　　色</div>
					<div class="dd">
						<div class="item selected" data-value="极光蓝">
							<a href="javascript:"><i>白色</i></a>
						</div>
						<div class="item" data-value="极光蓝">
							<a href="javascript:"><i>黑色</i></a>
						</div>
						<div class="item" data-value="极光蓝">
							<a href="javascript:"><i>宝蓝色</i></a>
						</div>					
					</div>					
				</div>
				<div class="innerline"></div>
				<div class="goods-info-buy">
					<!-- 选择数量 -->
					<div class="choose-amount">
						<div class="input-wrap">
							<input type="text" name="amount" id="buy-num" value="1">
							<a class="btn-reduce" onclick="setAmount.reduce('#buy-num')" href="#none" data-disabled="1">-</a>
							<a class="btn-add" onclick="setAmount.add('#buy-num')" href="#none" data-disabled="1">+</a>
						</div>						
					</div>
					<a href="" id="InitCartUrl" class="btn btn-danger btn-lg">立刻购买</a>
					<a href="" id="InitCartUrl" class="btn btn-danger btn-lg">加入购物车</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 商品详情及相关推荐 -->
	<div class="row" style="margin-top: 15px;">
		<!-- 商品推荐 -->
		<div class="col-md-3">
			<div class="panel panel-default">
				<div class="panel-heading">
					商品推荐
				</div>
				<div class="panel-body">
					<div class="media">
					  <div class="media-left">
					    <a href="#">
					      <img class="media-object" src="static/images/m01.jpg" width="50px" height="50px">
					    </a>
					  </div>
					  <div class="media-body">
					    <h5 class="media-heading">
					    	<a href="">Iphone 6s 全功能版本</a>
					    </h5>
					    <div class="price">
					    	<em>¥</em><i>2000</i>
					    </div>
					  </div>
					</div>
					<div class="media">
					  <div class="media-left">
					    <a href="#">
					      <img class="media-object" src="static/images/m01.jpg" width="50px" height="50px">
					    </a>
					  </div>
					  <div class="media-body">
					    <h5 class="media-heading">
					    	<a href="">Iphone 6s 全功能版本</a>
					    </h5>
					    <div class="price">
					    	<em>¥</em><i>2000</i>
					    </div>
					  </div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div class="panel goods-info-panel">
				<ul class="nav nav-tabs" id="goods-info-tabs">
				  <li role="presentation" data-event="details" class="active"><a href="javascript:">商品详情</a></li>
				  <li role="presentation" data-event="spec"><a href="javascript:">规格包装</a></li>
				  <li role="presentation" data-event="saleAfter"><a href="javascript:">售后保障</a></li>
				  <li role="presentation" data-event="comment"><a href="javascript:">商品评论</a></li>
				</ul>
				<div class="panel-body">
					<div id="details">
						<!-- 商品参数简况 -->
						<div class="p-parameter">
							<ul id="parameter-brand" class="p-parameter-list">
                                <li title="美的（Midea）">品牌： <a href="//list.jd.com/list.html?cat=737,794,870&amp;ev=exbrand_12380" clstag="shangpin|keycount|product|pinpai_1" target="_blank">美的（Midea）</a>
                                    <!--a href="#none" class="follow-brand btn-def" clstag='shangpin|keycount|product|guanzhupinpai'><b>&hearts;</b>关注 -->
                                </li>
                            </ul>
                            <ul class="parameter2 p-parameter-list">
                                    <li title="美的KFR-51LW/DY-YA400(D3)">商品名称：美的KFR-51LW/DY-YA400(D3)</li>
				    				<li title="4884790">商品编号：4884790</li>
				                         <li title="47.0kg">商品毛重：47.0kg</li>
				            <li title="中国大陆">商品产地：中国大陆</li>
				                                    <li title="定频">变频/定频：定频</li>
				                  <li title="圆柱式空调，静音空调">产品特色：圆柱式空调，静音空调</li>
				                  <li title="冷暖空调">冷暖类型：冷暖空调</li>
				                  <li title="2匹">商品匹数：2匹</li>
				                  <li title="三级能效">能效等级：三级能效</li>
				                  <li title="20-30㎡">使用面积：20-30㎡</li>
				                  <li title="立柜式空调">空调类别：立柜式空调</li>
                            </ul>
						</div>
						<div class="goods-info-conts">
							{$goodsInfo.goodsinfo}
						</div>
					</div>
					<div id="spec" class="none">
						商品的规格包装
					</div>
					<div id="saleAfter" class="none">
						商品的售后保障
					</div>
					<div id="comment" class="none">
						商品的评论
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="jsRes"}
<script>
	$('.glyphicon-menu-left').on('click', function(e) {
		var marginVal=$(this).siblings('.goodsinfo-img-list').find('ul').css('left');
		if(marginVal){
			// 计算位移的数值
			var marginNum=parseInt(marginVal);
			if (marginNum<0) {
				var marginNum=marginNum+60;
				$(this).siblings('.goodsinfo-img-list').find('ul').animate({			'left':marginNum+'px'});
			}else{
				$(this).siblings('.goodsinfo-img-list').find('ul').css('left','0px')
				alert('已经第一张了');
			}
		}
	});
	$('.glyphicon-menu-right').on('click', function(e) {
		var marginVal=$(this).siblings('.goodsinfo-img-list').find('ul').css('left');
		var imgLiSum=$(this).siblings('.goodsinfo-img-list').find('ul li').length;
		var maxWidth=56*(imgLiSum-5);
		if(marginVal){
			// 计算位移的数值
			var marginNum=parseInt(marginVal);
			var a = Math.abs(marginNum);
			if (a<maxWidth) {
				$(this).siblings('.goodsinfo-img-list').find('ul').animate({			'left':'-=60px'});
			}else{
				alert('已经最后一张了');
			}
		}
	});
	$('.goodsinfo-img-list').find('ul li').on('mouseenter',function(event){
		/* Act on the event */
		$(this).siblings('li').removeClass('img-hover');
		$(this).addClass('img-hover');
		var thumbUrl=$(this).find('img').attr('src');
		$('.goodsinfo-img-wrap').find('img').attr('src',thumbUrl);
	}).eq(0).addClass('img-hover');
	setAmount=new Object();
	setAmount.add=function(e){
		var num=parseInt($(e).val());		
		$(e).val(num+1);
	}
	setAmount.reduce=function(e){
		var num=parseInt($(e).val());		
		if(num>1){
			$(e).val(num-1);
		}
	}
	$('#buy-num').change(function(event) {
		var num=$(this).val();		
		if(!parseInt(num)){
			$(this).val(1);
		}
	});
	// 商品规格选择
	$('.goods-info-spec').find('.dd').find('.item').click(function(event) {
		/* Act on the event */
		$(this).siblings().removeClass('selected');
		$(this).addClass('selected');
	});
	// 商品详情列表
	$('#goods-info-tabs li').click(function(event) {
		/* Act on the event */
		$(this).siblings().removeClass('active');
		$(this).addClass('active');
		var event=this.getAttribute("data-event");
		$('#'+event).siblings('div').addClass('none');
		$('#'+event).removeClass('none');
	});
</script>
{/block}